<template>
	<div>
		<transition :name="transitionName">
			<router-view class="child-view"></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				transitionName: 'slide-right'
			}
		},
		created() {
			let vm = this;
			vm.$navigation.on('forward', (to, from) => {
				vm.transitionName = 'slide-left';
			})
			vm.$navigation.on('back', (to, from) => {
				vm.transitionName = 'slide-right';
			})
		},
		beforeRouteUpdate(to, from, next) {
			setTimeout(() => {
				next();
			}, 60);
		}
	}
</script>

<style scoped>
	.child-view {
		position: fixed;
		transition: transform .3s cubic-bezier(.55, 0, .1, 1);
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		will-change: transform;
	}
	
	.slide-left-enter,
	.slide-right-leave-active {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		z-index: 1;
	}
	
	.slide-left-leave-active,
	.slide-right-enter {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		z-index: -1;
	}
</style>